<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "note/base.html" %}
{% load static %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
博客板块
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->

{% block content %}
<style type="text/css">
    #like_button{
        cursor:pointer;
    }

</style>


<div class="container mt-5">
    <div class="row">
        <div class="col-lg-8">
                <table class="table table-striped">
        <thead>
            <th> 文章序号 </th>
            <th> 文章题目 </th>
            <th> 作者 </th>
            <th> 标签1 </th>
            <th> 标签2 </th>
            <th> 创建日期 </th>
            <th> 更新日期 </th>
            <th> 阅读量 </th>
            <th> 点赞数 </th>
            <th> 评论数 </th>
        </thead>
        <tbody>
        {% for note in notelist %}
        {% if note.is_show %}
        <tr>
            <td> {{forloop.counter}}</td>
            <td> <a href="single_note?auther={{note.auther.username}}&noteId={{note.id}}">{{note.title}}</a></td>
            <td> {{note.auther.username}} </td>
            <td> {{note.tag1}} </td>
            <td> {{note.tag2}} </td>
            <td> {{note.create_time}} </td>
            <td> {{note.update_time}} </td>
            <td> {{note.seen_num}} </td>
            <td> {{note.ok_num}} </td>
            <td> {{note.comment_num}} </td>
        </tr>
        {% endif %}
        {% endfor %}
<!--        {%for info in lst%}-->
<!--        <tr>-->
<!--            <td>-->
<!--                {{info.a}}-->
<!--            </td>-->
<!--        </tr>-->
<!--        {%endfor%}-->
        </tbody>

    </table>

        </div>
        <!-- Side widgets-->
        <div class="col-lg-4">
            <!-- Search widget-->
            <div class="card mb-4">
                <div class="card-header">搜索</div>
                <div class="card-body">
                    <form role="form" action="/note/search" method="post">
                    <div class="input-group">
                        <input class="form-control" type="text" name="search_content" placeholder="Enter search term..."  />
                        <button class="btn btn-primary" id="button-search" type="submit">Go!</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
   $(document).ready(function(){
    if("{{like}}"=="True"){
        $("#like_button").removeClass("bi-hand-thumbs-up");
        $("#like_button").addClass("bi-hand-thumbs-up-fill");
    }
    else{
        $("#like_button").removeClass("bi-hand-thumbs-up-fill");
        $("#like_button").addClass("bi-hand-thumbs-up");
    }
  $("#like_button").click(function(){
<!--   console.log("{{targetUser}}");-->
<!--   var num = $("#like_button").html();-->
<!--   num = parseInt(num);-->
<!--   num = num + 1;-->
<!--   console.log(typeof num);-->
<!--   $("#like_button").html(num);-->
    $.ajax({
        url:"like_handle",
        type:"POST",
        data:{
            user: "{{username}}",
            targetNote:"{{note.id}}"
        },
        cache:false,
        success: function(data){
            $("#like_button").html(data['like_num']);
            if(data['like']){
                $("#like_button").removeClass("bi-hand-thumbs-up");
                $("#like_button").addClass("bi-hand-thumbs-up-fill");
            }else{
                $("#like_button").removeClass("bi-hand-thumbs-up-fill");
                $("#like_button").addClass("bi-hand-thumbs-up");
            }
        },
        error: function(xhr){
            console.log(xhr)
        }
    });

  });
});
</script>
{% endblock content %}